/**
 * 组件代码
 */
Vue.component('comSougnScatter', {
    name: 'comSougnScatter',
    props: ['config', 'data'],
    data: function () {
        return {
            myChart: {},
            option:{
                xAxis: {},
                yAxis: {},
                series: [{
                    symbolSize: 20,
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                        [11.5, 7.20],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                    type: 'scatter'
                }]
            }
        }
    },
    mounted: function () {
        var that = this;
        this.myChart = echarts.init(this.$el);
        // 指定图表的配置项和数据
        this.myChart.setOption(this.getData());
        this.myChart.on('click', function (params) {
            // 在用户点击后控制台打印数据的名称
            var data = [];
            data.push(params.name);
            data.push(params.seriesName);
            data.push(params.value);
            if (that.myConfig.output.trim() == "") {
                return;
            } else {
                setValue(that.myConfig.output, data);
            }
        });
        var that = this;
        setTimeout(function () {
            that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
        }, 100)
    },
    methods: {
        getData() {
            var options = Object.assign({}, this.option);
            var title = window.getValue(this.myConfig.title);
            var x = window.getValue(this.myConfig.x).reduce(function (a, b) {
                return a.concat(b)
            });
            var y = window.getValue(this.myConfig.y).reduce(function (a, b) {
                return a.concat(b)
            });
            var newData = []
            for (var i in x) {
                newData.push([
                        x[i],
                        y[i]
                    ]
                )
            }
            var data = {
                title: {
                    text: title
                },
                series: [{
                    type: 'scatter',
                    data: newData
                }]
            }
            Object.assign(options, data)
            return options;
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            return data;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            var that = this;
            this.myChart.setOption(this.getData());
            setTimeout(function () {
                that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
            }, 100)
        }
    },
    template: `<div :style="myConfig" style="width: 100%;height: 100%;"></div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnScatterConfig = [{
    name: "标题",
    type: "data",
    value: "",
    id: "title"
}, {
    name: "X轴",
    type: "data",
    value: "",
    id: "x"
}, {
    name: "Y轴",
    type: "data",
    value: "",
    id: "y"
}]
